<template>
  <!-- PolicyDetail 政策详情 -->
  <PageContainer>
    <view class="container">
      <Header title="政策详情" :is-box-shadow="false" />
      <view class="item item1">
        <view class="title">{{ result?.title }}</view>
        <view class="tag">
          <text class="tag-item">{{ result?.partition }}</text>
        </view>
        <view class="text">来源：{{ result?.dept }}</view>
        <view class="text time">申报时间：{{ result?.startTime }} ~ {{ result?.endTime }}</view>
      </view>

      <view class="item item2">
        <view class="title">适用产业</view>
        <view class="tag" :class="[autoHeight ? 'open' : 'close']">
          <template v-for="text in industries" :key="text">
            <text class="tag-item">{{ text }}</text>
          </template>
        </view>
        <view
          class="action"
          v-if="industries && industries?.length > 8"
          @click="handleToggerHeight"
        >
          <text class="text">{{ autoHeight ? '收起' : '展开' }}</text>
          <text class="ali-icon" :class="[autoHeight ? 'top' : 'right']">&#xe6c7;</text>
        </view>
      </view>

      <view class="item item3">
        <view class="content">
          <view class="title">申请条件</view>
          <view class="text">{{ result?.condition }}</view>
        </view>
        <view class="content">
          <view class="title">支持力度</view>
          <view class="text">{{ result?.support }}</view>
        </view>
        <view class="content">
          <view class="title">申报材料</view>
          <view class="text">{{ result?.materials }}</view>
        </view>
        <view class="content">
          <view class="title">项目来源</view>
          <view class="text">{{ result?.announcements }}</view>
        </view>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  PolicyDetail  政策详情 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { policyDetail } from '@/api/membership/index';
  import { computed, ref } from 'vue';
  import { type PolicyDetailResult } from '@/api/membership/types';
  import { onLoad } from '@/router';

  const id = ref();
  const result = ref<PolicyDetailResult>();
  const autoHeight = ref(false);

  async function getPolicyDetail() {
    let res = await policyDetail(id.value);
    result.value = res;
  }

  onLoad<'PolicyDetail'>((op) => {
    id.value = op.id;
    getPolicyDetail();
  });

  const industries = computed(() => {
    return result.value?.industries?.split(',');
  });

  function handleToggerHeight() {
    autoHeight.value = !autoHeight.value;
  }
</script>

<style lang="scss" scoped>
  .item {
    padding: 30rpx;
    background-color: #fff;
    margin-bottom: 27rpx;
    box-sizing: border-box;
    .tag {
      margin-bottom: 30rpx;
      display: flex;
      flex-wrap: wrap;
      &-item {
        padding: 0 15rpx;
        font-size: 23rpx;
        color: #808080;
        background-color: #f5f5f5;
        border: 1rpx #dddddd solid;
        border-radius: 20rpx;
        margin-top: 20rpx;
        margin-right: 30rpx;
        height: 40rpx;
        line-height: 40rpx;
      }
    }
    .title {
      color: #333333;
      font-weight: bold;
    }
  }
  .item1 {
    padding-bottom: 35rpx;
    .title {
      font-size: 37rpx;
    }

    .text {
      font-size: 26rpx;
      color: #808080;
    }
    .time {
      margin-top: 10rpx;
    }
  }
  .item2 {
    padding-bottom: 20rpx;
    .title {
      font-size: 31rpx;
    }
    .tag {
      height: 130rpx;
    }
    .open {
      height: auto;
    }
    .close {
      height: 130rpx;
      overflow: hidden;
    }
    .action {
      display: flex;
      align-items: center;
      justify-content: center;
      .text {
        font-size: 27rpx;
        color: #2878ff;
      }
      .ali-icon {
        font-size: 36rpx;
        color: #2878ff;
        transform: rotate(0);
        transition: all 0.3s;
      }
      .top {
        transform: rotate(-90deg);
      }
      .right {
        transform: rotate(0);
      }
    }
  }

  .item3 {
    .content {
      margin-bottom: 58rpx;
      .title {
        font-size: 31rpx;
      }
      .text {
        margin-top: 20rpx;
        font-size: 27rpx;
        color: #333333;
        word-break: break-all;
        white-space: break-spaces;
      }
    }
  }
</style>
